<template>
  <!-- 楼层码 -->
  <div id="scan_code" v-if="showCode" :class="['scan_code']">
    <div class="title">扫码选品</div>
    <div class="conent">
      <van-image class="profile" :src="userInfo?.avatar" round fit="cover" />
      <div class="names ">{{ userInfo?.nickName }}</div>
      <div class="dandp">{{ userInfo.dept?.deptName }} | {{ roles.roleName }}</div>
      <div class="floor">{{ qrCodeRowName }}</div>
      <div class="qrcode">
        <div class="message">扫描下方的二维码选品</div>
        <img style="width: 200px; height: 200px;" :src="qrCodeData" alt="">
      </div>
      <div class="refresh" @click="getQrCode">
        <van-image :src="icon_shuaxin" />
        刷新二维码
      </div>
      <van-image :src="icon_xiahuagengduo" class="glide" @click="glide" />
    </div>
  </div>
  <!-- 首页main -->
  <div id="home-index" v-if="!showCode" class="home-index b-box">
    <van-image
      v-if="rolesArr.includes('recruitManageTwo') || rolesArr.includes('recruitManageThree') || rolesArr.includes('recruitManageFour') || rolesArr.includes('recruitManageFive')"
      :src="icon_shanghuagengduo" class="icon_shanghuagengduo" @touchstart="touchstart($event)" @click="shanghua"
      @touchmove="touchmove($event)" @touchend="touchend()"></van-image>
    <div class="home-index-user">
      <van-image class="home-index-user-image" :src="userInfo?.avatar || basicAvatar" round fit="cover" />
      <div class="home-index-user-info">
        <div class="home-index-user-info-name ellipsis">{{ userInfo?.nickName }}</div>
        <div class="home-index-user-info-dandp flex-row">
          <div class="topbumen_l ellipsis flex-center">
            {{ userInfo.dept?.deptName }}
          </div>
          <div class="topbumen_r ellipsis flex-center">
            {{ positionName(userPost) }}
          </div>
        </div>
      </div>

      <van-badge :dot="newsQuantity !== 0" class="menu_news">
        <van-image :src="icon_xiaoxi" @click="icon_xiaoxiClick" />
      </van-badge>
      <!-- <van-badge :dot="newsQuantity === 0" :offset="[-8, 6]" class="erweima_news">
        <van-image :src="icon_xiaoxi" @click="icon_xiaoxiClick" />
      </van-badge> -->
      <!-- <van-image v-if="isQr()" class="erweima_cion" :src="erweima" @click="weChatSet" /> -->

      <van-popup v-model:show="showQRcode" style="background-color: revert;">
        <div class="QRcode">
          <van-image class="guanbi_cion" :src="guanbiIcon" @click="showQRcode = false" />
          <div class="qr_div" ref="qr_div">
            <div class="code_title">
              <span>【{{ userInfo?.remark }}】邀请您扫码入驻</span><br>
              <span>惠麦供应链系统</span>
            </div>
            <div class="code">
              <vue-qr class="code_content" ref="qrcode" :text="qrCodeValue" :size="500"></vue-qr>
            </div>
          </div>
          <div class="QR_BT_box">

            <van-image class="weixin_cion" :src="weixinIcon" @click="shareToWechat" />
            <van-image class="weixin_cion" :src="downloadIcon" @click="download" v-throttle:click />
          </div>
        </div>

      </van-popup>
      <!-- <van-image class="menu_cion" :src="menuIcon" @click="showRight = true" /> -->
    </div>
    <!-- 公告--暂时隐藏 -->
    <!-- <div class="home-index-notice">
      <van-image class="notice_icon" :src="gonggao" />
      <van-notice-bar class="font" scrollable :text="versionNotice" />
    </div> -->

    <div class="home-index-data b-box">
      <div class="home-index-data-bg"></div>
      <div class="home-index-data-mainbox">
        <div class="home-index-data-title">
          <div class="home-index-data-title-title flex-align-center ">
            <van-image class="home-index-todo-title-image" :src="sjjbImage" />
            <div class="home-index-data-title-title-textimg"></div>
          </div>
          <div class="home-dates-box flex-align-center b-box" @click="showCalendar = true">
            <div class="flex-align-center">
              <div class="home-index-data-date-first">
                <!-- <div class="home-index-data-date-first-date" @click="showPicker = true"> -->
                <div class="home-index-data-date-first-date">
                  {{ currentDateFormat }}
                </div>
              </div>
              <div class="line"></div>
              <div class="home-index-data-date-second">
                <!-- <div class="home-index-data-date-second-date" @click="showPickerBottom = true"> -->
                <div class="home-index-data-date-second-date">
                  {{ currentDateFormatInterval }}
                </div>
              </div>
            </div>

            <div class="r_img"></div>
          </div>

          <van-calendar v-model:show="showCalendar" switch-mode="year-month" allow-same-day type="range"
            @confirm="onConfirmCalendar" />
        </div>
        <div class="home-index-data-card">
          <div class="home-index-data-card-first">
            <div class="home-index-data-card-first-first home-index-data-card-position"
              @click="briefingProducts('新增商品')">
              <van-image class="home-index-data-card-first-first-image" :src="xzspImage" />
              <div class="home-index-data-card-first-first-text home-index-data-card-position-text">
                <div>{{ addProductNums }}</div>
                <div class="home-index-data-card-first-first-text home-index-data-card-position-text-size">
                  新增商品
                </div>
              </div>
            </div>
            <div class="home-index-data-card-first-second home-index-data-card-position"
              @click="briefingProducts('上架商品')">
              <van-image class="home-index-data-card-first-first-image" :src="sjspImage" />
              <div class="home-index-data-card-first-second-text home-index-data-card-position-text">
                <div>{{ listingNums }}</div>
                <div class="home-index-data-card-first-first-text1 home-index-data-card-position-text-size">
                  上架商品
                </div>
              </div>
            </div>
            <div class="home-index-data-card-first-third home-index-data-card-position"
              @click="briefingProducts('建联商家')">
              <van-image class="home-index-data-card-first-first-image" :src="jlspImage" />
              <div class="home-index-data-card-first-third-text home-index-data-card-position-text">
                <div>{{ jianlianNums }}</div>
                <div class="home-index-data-card-first-first-text2 home-index-data-card-position-text-size">
                  建联商家
                </div>
              </div>
            </div>
          </div>
          <div class="home-index-data-card-second">
            <div class="home-index-data-card-second-first home-index-data-card-position"
              @click="briefingProducts('主播选品')">
              <van-image class="home-index-data-card-first-first-image" :src="zbxpImage" />
              <div class="home-index-data-card-second-first-text home-index-data-card-position-text">
                <div>{{ launchNums }}</div>
                <div class="home-index-data-card-first-first-text3 home-index-data-card-position-text-size">
                  主播选品
                </div>
              </div>
            </div>
            <div class="home-index-data-card-second-second home-index-data-card-position"
              @click="briefingProducts('入库商品')">
              <van-image class="home-index-data-card-first-first-image" :src="rkspImage" />
              <div class="home-index-data-card-second-second-text home-index-data-card-position-text">
                <div>{{ warehousingNums }}</div>
                <div class="home-index-data-card-first-first-text4 home-index-data-card-position-text-size">
                  入库商品
                </div>
              </div>
            </div>
            <div class="home-index-data-card-second-third home-index-data-card-position"
              @click="briefingProducts('签署合同')">
              <van-image class="home-index-data-card-first-first-image" :src="qshtImage" />
              <div class="home-index-data-card-second-third-text home-index-data-card-position-text">
                <div>{{ signNums }}</div>
                <div class="home-index-data-card-first-first-text5 home-index-data-card-position-text-size">
                  签署合同
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="home-index-todo">
      <div class="home-index-todo-title">
        <div class="home-index-todo-title-imgtext"></div>
      </div>
      <div class="todo_guajian"></div>
      <div class="home-index-todo-list">
        <div class="home-index-todo-list-first" v-for="(item, index) in centerList" :key="index"
          @click="toProductList(item.id)">
          <van-image class="home-index-todo-list-first-image" :src="item.img" />
          <div>{{ item.name }}</div>
          <div class="home-index-todo-list-first-badge" v-show="item.nums !== 0">
            <div>{{ item.nums }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-index-shortcuts">
      <div class="home-index-shortcuts-title b-box">
        <van-image class="home-index-todo-title-image" :src="kjrkImage" />
        <van-image class="home-index-todo-title-textimage" :src="kjrkTextImage" />
      </div>
      <div class="home-index-shortcuts-card b-box">
        <div class="home-index-shortcuts-card-left b-box" @click.prevent="addProduct('添加商品')">
          <van-image :src="tjspImage" class="home-index-shortcuts-card-left-image" />
          <div class="home-index-shortcuts-card-left-text">添加商品</div>
          <div class="home-index-shortcuts-card-left-tips">
            已到样商品或已有信息但未到样商品的详细信息填报
          </div>
        </div>
        <div class="home-index-shortcuts-card-right">
          <div class="home-index-shortcuts-card-right-top" @click.prevent="addProduct('添加供应商')">
            <van-image :src="tjgysImage" class="home-index-shortcuts-card-right-top-image" />
            <div class="home-index-shortcuts-card-right-top-text">
              添加供应商
            </div>
            <div class="home-index-shortcuts-card-right-top-tips">
              录入新建联的商家信息
            </div>
          </div>
          <div class="home-index-shortcuts-card-right-bottom" @click.prevent="addProduct('邀约样品')">
            <van-image :src="tjspImage1" class="home-index-shortcuts-card-right-bottom-image" />
            <div class="home-index-shortcuts-card-right-bottom-text">
              邀约样品
            </div>
            <div class="home-index-shortcuts-card-right-bottom-tips">
              商家寄样信息简易填报
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <SystemSettings v-model="showRight"></SystemSettings>
  <van-popup v-model:show="showPicker" position="bottom">
    <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" v-model="currentDate" :max-date="maxDate" />
  </van-popup>
  <van-popup v-model:show="showPickerBottom" position="bottom">
    <van-date-picker @confirm="onConfirmBottom" @cancel="showPickerBottom = false" v-model="currentDateBottom"
      :min-date="minDate" />
  </van-popup>
</template>

<script setup lang="ts">
const showCode = ref(false)
const timer = ref()
const isLongClick = ref(false)
// const newsQuantity = ref(0)
// 手指位置
const originGesPos = ref({ x: 0, y: 0 })
// 元素位置
const originElePos = ref({ x: 0, y: 0 })
// 手指点击事件
const touchstart = (e: TouchEvent) => {
  // 定时器控制长按时间，超过500毫秒开始进行拖拽
  timer.value = setTimeout(() => {
    isLongClick.value = true
  }, 200)
  const selectDom = e.currentTarget as HTMLElement
  const { pageX, pageY } = e.touches[0] // 手指位置
  const { offsetLeft, offsetTop } = selectDom // 元素位置
  // 手指原始位置
  originGesPos.value = { x: pageX, y: pageY }
  // 元素原始位置
  originElePos.value = { x: offsetLeft, y: offsetTop }
}
// 滑动事件
const touchmove = (e: TouchEvent) => {
  // 未达到500毫秒就移动则不触发长按，清空定时器
  clearTimeout(timer.value)
  if (isLongClick.value) {
    // y轴偏移量
    const tops = originGesPos.value.y - originElePos.value.y
    const { pageY } = e.touches[0] // 手指位置
    const moveDom = document.querySelector("#home-index") as HTMLElement;
    // 控制手指滑动后啊 盒子得移动 慢3倍移动
    moveDom.style.top = `${(pageY - tops) / 3}px`
  }
}
// 手指离开事件
const touchend = () => {
  clearTimeout(timer.value)
  if (isLongClick.value) {
    isLongClick.value = false
    const moveDom = document.querySelector("#home-index") as HTMLElement;
    if (moveDom.getBoundingClientRect().top >= 100) {
      showCode.value = true
      moveDom.style.top = '0px'
    } else {
      moveDom.style.top = '0px'
    }

  }
}
const shanghua = () => {
  getQrCode()
  showCode.value = true
}
// 下滑事件
const glide = () => {
  const showDom = document.querySelector("#home-index") as HTMLElement;
  if (showDom) {
    showDom.style.animation = `slide-show-bottom-top 1s ease forwards`;
  }
  const hideDom = document.querySelector("#scan_code") as HTMLElement;
  if (hideDom) {
    hideDom.style.animation = `slide-hide-bottom-top 1s ease forwards`;
  }
  showCode.value = false

}

import SystemSettings from '@/components/SystemSettings/index.vue'
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getInfo } from "@/api/supplierList/index";
import { loginStore } from "@/store/login";
import { storeToRefs } from "pinia";
import { listNotice } from '@/api/loginApi'
import { stripTags } from '@/utils/index'
import { getTotal, totalByUserIdAndTime } from "@/api/productList/index";
import vueQr from 'vue-qr/src/packages/vue-qr.vue';
import { qrCode, getQrCodeDeptName } from "@/api/operation/index";
import { queryDeptCount } from '@/api/operation/index'
import html2canvas from 'html2canvas'
const route = useRoute();
const store = loginStore();
const { token } = storeToRefs(store);
// const menuIcon = new URL(
//   "@/assets/newui/home/icon_caidan@2x.png",
//   import.meta.url
// ).href;
const weixinIcon = new URL(
  "@/assets/newui/home/icon_weixin@2x.png",
  import.meta.url
).href;
const downloadIcon = new URL(
  "@/assets/newui/home/icon_baocunbendi@2x.png",
  import.meta.url
).href;
const guanbiIcon = new URL(
  "@/assets/newui/home/icon_guanbi@2x.png",
  import.meta.url
).href;

const tjgysImage = new URL(
  "@/assets/newui/home/icon_tianjiagongyingshang@2x.png",
  import.meta.url
).href;

const tjspImage = new URL(
  "@/assets/newui/home/icon_tianjiashangpin@2x.png",
  import.meta.url
).href;
const tjspImage1 = new URL(
  "@/assets/newui/home/icon_yaoyueyangpin@2x.png",
  import.meta.url
).href;
const sjjbImage = new URL(
  "@/assets/newui/home/icon_shujujianbaotu@2x.png",
  import.meta.url
).href;

const kjrkImage = new URL(
  "@/assets/newui/home/icon_kuaijierukoutu@2x.png",
  import.meta.url
).href;
const kjrkTextImage = new URL(
  "@/assets/newui/home/icon_kuaijierukou@2x.png",
  import.meta.url
).href;

// const lsxsjImage = new URL(
//   "@/assets/home/icon_lansexiasanjiao.png",
//   import.meta.url
// ).href;

const xzspImage = new URL(
  "@/assets/newui/home/icon_xinzengshangpin@2x.png",
  import.meta.url
).href;

const sjspImage = new URL(
  "@/assets/newui/home/icon_shangjiashangpin@2x.png",
  import.meta.url
).href;

const jlspImage = new URL(
  "@/assets/newui/home/jianlianshangjia@2x.png",
  import.meta.url
).href;

const zbxpImage = new URL(
  "@/assets/newui/home/icon_zhuboxuanpin@2x.png",
  import.meta.url
).href;

const rkspImage = new URL(
  "@/assets/newui/home/icon_rukushangpin@2x.png",
  import.meta.url
).href;

const qshtImage = new URL(
  "@/assets/newui/home/icon_qianshuhetong@2x.png",
  import.meta.url
).href;

// const dbgzImage = new URL(
//   "@/assets/home/icon_daibangongzuo@2x.png",
//   import.meta.url
// ).href;

// const erweima = new URL(
//   "@/assets/newui/home/icon_erweima@2x.png",
//   import.meta.url
// ).href;

// const gonggao = new URL(
//   "@/assets/home/icon_gonggao.png",
//   import.meta.url
// ).href;

const icon_shanghuagengduo = new URL(
  "@/assets/productHome/icon_shanghuagengduo.png",
  import.meta.url
).href;

const icon_shuaxin = new URL(
  "@/assets/home/icon_shuaxin.png",
  import.meta.url
).href;
const icon_xiahuagengduo = new URL(
  "@/assets/home/icon_xiahuagengduo.png",
  import.meta.url
).href;
const basicAvatar = new URL(
  "@/assets/newui/home/basicAvatar.png",
  import.meta.url
).href;
// const icon_xiaoxi = new URL(
//   "@/assets/newui/home/icon_xiaoxitongzhi@2x.png",
//   import.meta.url
// ).href;
const icon_xiaoxi = new URL(
  "@/assets/newui/home/icon_xiaoxitongzhi@2x.png",
  import.meta.url
).href;

const router = useRouter();
const userInfo = ref<any>({});
const userPost = ref<any>([]);
const roles = ref<any>({});
const rolesArr = ref<any>('')
const avtiveIndex = ref<any>(0);
const showPicker = ref(false);
const showPickerBottom = ref(false)
const addProductNums = ref(0);
const listingNums = ref(0);
const jianlianNums = ref(0);
const launchNums = ref(0);
const warehousingNums = ref(0);
const signNums = ref(0);
const showRight = ref(false);
const showQRcode = ref(false)
const versionNotice = ref()
const newsQuantity = ref(0)

const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1;
const date = today.getDate();
const currentDate = ref([
  year + "",
  month < 10 ? "0" + month : month + "",
  date < 10 ? "0" + date : date + "",
]);
const currentDateBottom = ref([
  year + "",
  month < 10 ? "0" + month : month + "",
  date < 10 ? "0" + date : date + "",
]);

/** 回显周期筛选字段 */
const startTime = computed(() => {
  return route.query.startTime;
});
/** 回显周期筛选字段 */
const endTime = computed(() => {
  return route.query.endTime;
});
const currentDateFormat = ref<any>(currentDate.value.join("/"))
const currentDateFormatInterval = ref<any>(currentDateBottom.value.join("/"))

const qrCodeData = ref()
const qrCodeRowName = ref('')
const qrcode = ref();

const qrCodeValue = ref('');
const qr_div = ref()
// 下载
const download = () => {
  // // TODO 接口返回数据  
  // let res = "https://dev-supply.huimaisoft.com:19315"
  // // 数据返回生产二维码
  // qrCodeValue.value = res;

  // 生成二维码是属于异步行为，所以下载二维码也为异步行为

  const timer = setTimeout(() => {
    html2canvas(qr_div.value, {
      useCORS: true,
    }).then(canvas => {
      let imgurl = canvas.toDataURL('image/png');
      // 提取 base64 数据部分
      if (imgurl.includes(";base64,")) {
        imgurl = imgurl.split(";base64,")[1]; // 获取 base64 数据部分

      } else {
        // 如果 URL 不包含 ";base64,"，可能需要根据具体情况进行处理
        console.error('URL中不包含";base64,"，请确认URL格式是否正确。');
      }

      // 发送图片请求给webview
      (window as any).uni.webView.postMessage({
        data: {
          type: "img",
          url: imgurl,
          // 方式：保存
          function: "save",
          header: {
            Authorization: `Bearer ${token.value}`,
            clientid: "e5cd7e4891bf95d1d19206ce24a7b32e",
          },
        },
      });
      clearTimeout(timer);
    });


  });
}
// 分享
const shareToWechat = () => {
  html2canvas(qr_div.value, {
    useCORS: true,
  }).then(canvas => {
    let imgurl = canvas.toDataURL('image/png');
    // 提取 base64 数据部分
    if (imgurl.includes(";base64,")) {
      imgurl = imgurl.split(";base64,")[1]; // 获取 base64 数据部分

    } else {
      // 如果 URL 不包含 ";base64,"，可能需要根据具体情况进行处理
      console.error('URL中不包含";base64,"，请确认URL格式是否正确。');
    }

    // 发送分享请求给webview
    (window as any).uni.webView.postMessage({
      data: {
        type: "img",
        url: imgurl,
        // 方式：分享
        function: "share",
        header: {
          Authorization: `Bearer ${token.value}`,
          clientid: "e5cd7e4891bf95d1d19206ce24a7b32e",
        },
      },
    });
  })
}
onMounted(() => {
  startTime.value && (currentDateFormat.value = (startTime.value as any).split(' ')[0])
  endTime.value && (currentDateFormatInterval.value = (endTime.value as any).split(' ')[0])
  const datas = currentDateFormat.value.split('/')
  const dataSecond = datas[2].split(' ')[0]
  const datasBottom = currentDateFormatInterval.value.split('/')
  const dataBottomSecond = datasBottom[2].split(' ')[0]
  currentDate.value = [
    datas[0],
    datas[1],
    dataSecond
  ]
  currentDateBottom.value = [
    datasBottom[0],
    datasBottom[1],
    dataBottomSecond
  ]
  getList();
  gettotalByUserIdAndTime()
})
// 查询楼层码
const getQrCode = async () => {
  const res = await qrCode()
  qrCodeData.value = `data: image/jpeg;base64,${btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
}
// 查询当前楼层
const GetQrCodeDeptName = async () => {
  const { msg = '' } = await getQrCodeDeptName({})
  qrCodeRowName.value = msg
}

// 限制最大可选时间
const maxDate = computed(() => {
  return new Date(currentDateBottom.value.join('/'))
})

// 限制最小可选时间
const minDate = computed(() => {
  return new Date(currentDate.value.join('/'))
})

/** 数据简报跳转 */
const briefingProducts = (type: string) => {
  if (['新增商品', '上架商品', '主播选品', '入库商品'].includes(type)) {
    router.push({
      path: '/briefingProduct',
      query: {
        type: type,
        avtiveIndex: avtiveIndex.value,
        startTime: currentDateFormat.value + ' 00:00:00',
        endTime: currentDateFormatInterval.value + ' 23:59:59'
      }
    })
  } else {
    router.push({
      path: '/briefingSupplier',
      query: {
        type: type,
        avtiveIndex: avtiveIndex.value,
        startTime: currentDateFormat.value + ' 00:00:00',
        endTime: currentDateFormatInterval.value + ' 23:59:59'
      }
    })
  }
}
/** 日期选择 */
const onConfirm = () => {
  showPicker.value = false;
  currentDateFormat.value = currentDate.value.join("/")
  gettotalByUserIdAndTime();
};
/** 日期选择 */
const onConfirmBottom = () => {
  showPickerBottom.value = false
  currentDateFormatInterval.value = currentDateBottom.value.join("/")
  gettotalByUserIdAndTime();
}
/** 获取首页数据简报 */
const gettotalByUserIdAndTime = async () => {
  const res = await totalByUserIdAndTime({
    startTime: currentDateFormat.value + ' 00:00:00',
    endTime: currentDateFormatInterval.value + ' 23:59:59'
  })
  res.data.forEach(item => {
    if (item.auditStatus == '增品') {
      addProductNums.value = item.total
    } else if (item.auditStatus == '上架') {
      listingNums.value = item.total
    } else if (item.auditStatus == '建联') {
      jianlianNums.value = item.total
    } else if (item.auditStatus == '选中') {
      launchNums.value = item.total
    } else if (item.auditStatus == '入库') {
      warehousingNums.value = item.total
    } else if (item.auditStatus == '签合同') {
      signNums.value = item.total
    }
  })
}

const centerList = ref([
  {
    name: "待收货",
    nums: 0,
    id: "2",
    img: new URL("@/assets/newui/home/icon_daishouhuo@2x.png", import.meta.url).href,
  },
  {
    name: "待上架",
    nums: 0,
    id: "4",
    img: new URL("@/assets/newui/home/icon_daishangjia@2x.png", import.meta.url).href,
  },
  {
    name: "已选品",
    nums: 0,
    id: "99",
    img: new URL("@/assets/newui/home/icon_yixuanpin@2x.png", import.meta.url).href,
  },
  {
    name: "待送审",
    nums: 0,
    id: "6",
    img: new URL("@/assets/newui/home/icon_daisongshen@2x.png", import.meta.url).href,
  },
  {
    name: "待入库",
    nums: 0,
    id: "15",
    img: new URL("@/assets/newui/home/icon_dairuku@2x.png", import.meta.url).href,
  },
  {
    name: "审批驳回",
    nums: 0,
    id: "999",
    img: new URL("@/assets/newui/home/icon_shenpibohui@2x.png", import.meta.url).href,
  },
  // {
  //   name: "待议价",
  //   nums: 0,
  //   id: "9",
  //   img: new URL("@/assets/home/pendingBargaining.png", import.meta.url).href,
  // },
  // {
  //   name: '已超期 ', nums: 0, img: new URL('@/assets/home/warehousing.png', import.meta.url).href
  // },
]);

/** 首页快捷入口 */
const addProduct = (name: string) => {
  if (name == "添加商品") {
    router.push("/addProduct");
  } else if (name == "添加供应商") {
    router.push("/addSupplier");
  } else if (name == "邀约样品") {
    router.push("/sample");
  }
};
/** 获取版本更新公告 */
const getNotice = async () => {
  const res = await listNotice({})
  const privacyNotice = res.rows.find(item => item.noticeTitle === '版本更新公告');
  if (privacyNotice) {
    versionNotice.value = stripTags(privacyNotice.noticeContent);
  }
}
getNotice()
const getList = async () => {
  const res = await getInfo();
  roles.value = res.data.user.roles[0];
  rolesArr.value = res.data.roles.join(',')
  userInfo.value = res.data.user;
  userPost.value = res.data.posts || []
  const total = await getTotal();
  centerList.value[0].nums = total.data[2].total;
  centerList.value[1].nums = total.data[4].total;
  centerList.value[2].nums = total.data[6].total;
  centerList.value[3].nums = total.data[7].total;
  centerList.value[4].nums = total.data[9].total;
  centerList.value[5].nums = total.data[10].total;
  if (rolesArr.value.includes('recruitManageTwo') || rolesArr.value.includes('recruitManageThree') || rolesArr.value.includes('recruitManageFour') || rolesArr.value.includes('recruitManageFive')) {
    getQrCode()
    GetQrCodeDeptName()
  }
  // centerList.value[5].nums = total.data[10].total;
};


/** 跳转 */
const toProductList = (id: string) => {
  if (id == '99') {
    router.push({
      path: '/selectProducts',
      query: {
        startTime: currentDateFormat.value,
        endTime: currentDateFormatInterval.value,
        type: '0'
      }
    })
  } else if (id == '999') {
    router.push({ path: "/productSelection", query: { status: 2 } });
  } else {
    router.push({ path: "/productList", query: { id: id } });
  }
  // 待议价暂时关闭跳转
  // if (id !== '9') {
  // }
  // router.push({ path: "/productList", query: { id: id } });

};
// 反显职位权限名称
const positionName = (data: any) => {
  let name: any = []
  data.forEach((item: any) => {
    name.push(item.postName)
  })
  return name.join('/')
}
//================================日历==============
const showCalendar = ref(false);
const formatDate = (date) => `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
const onConfirmCalendar = (values) => {
  const [start, end] = values;
  showCalendar.value = false;
  currentDateFormat.value = formatDate(start)
  currentDateFormatInterval.value = formatDate(end)
  gettotalByUserIdAndTime();
};
// 通知中心
const icon_xiaoxiClick = () => {
  router.push({
    path: `/notice`,
    query: {
      type: '招商部'
    }
  });
}
const getCountNotReadMsg = async () => {
  const { data } = await queryDeptCount({})
  newsQuantity.value = Number(data?.readCount) + Number(data?.waitCount)
}
getCountNotReadMsg()
</script>

<style lang="less" scoped>
// 从无到有 从上到下
@keyframes slide-show-top-bottom {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

// 从无到有 从下到上
@keyframes slide-show-bottom-top {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

// 从有到无 从下到上
@keyframes slide-hide-bottom-top {
  from {
    transform: translateY(-100%);
    opacity: 1;
  }

  to {
    transform: translateY(0);
    opacity: 0;
  }
}

// 从有到无 从上到下
@keyframes slide-hide-top-bottom {
  from {
    transform: translateY(-100%);
    opacity: 1;
  }

  to {
    transform: translateY(0);
    opacity: 0;
  }
}

.slide-show-top-bottom {
  animation: slide-show-top-bottom 1s ease forwards;
}

.slide-show-bottom-top {
  animation: slide-show-bottom-top 1s ease forwards;
}

.slide-hide-bottom-top {
  animation: slide-hide-bottom-top 1s ease forwards;
}

.slide-hide-top-bottom {
  animation: slide-hide-top-bottom 1s ease forwards;
}


.scan_code {
  width: 100%;
  height: calc(100vh - 50px);
  background: url('@/assets/home/icon_shouyebeijing1.png') no-repeat;
  background-position: 0 0;
  background-size: 100% 296px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  position: relative;
  overflow: auto;
  animation: slide-show-top-bottom 1s ease forwards;

  .title {
    width: 100%;
    margin-top: 60px;
    text-align: center;
    margin-bottom: 50px;
  }

  .conent {
    width: 345px;
    height: 612px;
    background: #FFFFFF;
    border-radius: 5px;
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;

    .profile {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #E0F1FE;
      position: absolute;
      left: 142px;
      top: -30px;
    }

    .names {
      width: 100%;
      text-align: center;
      font-weight: 600;
      font-size: 16px;
      color: #1A1B1C;
      margin-top: 50px;
    }

    .dandp {
      width: 100%;
      text-align: center;
      font-weight: 400;
      font-size: 14px;
      color: #1A1B1C;
      margin-top: 10px;
    }

    .floor {
      width: 285px;
      height: 38px;
      background: linear-gradient(270deg, #0064FF 0%, #008FFF 100%);
      border-radius: 5px 5px 0px 0px;
      text-align: center;
      font-weight: 500;
      font-size: 14px;
      color: #FFFFFF;
      text-align: center;
      line-height: 38px;
      margin-top: 20px;
    }

    .qrcode {
      width: 285px;
      height: 265px;
      background: linear-gradient(180deg, #FFFFFF 0%, #EBF4FF 100%);
      border-radius: 0px 0px 5px 5px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      .message {
        width: 100%;
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        color: #1A1B1C;
        margin-top: 20px;
      }

      .code_content {
        width: 171px;
        height: 171px;
        margin-top: 30px;
      }
    }

    .refresh {
      width: 100%;
      text-align: center;
      font-weight: 400;
      font-size: 14px;
      color: #0094FF;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 30px;

      .van-image {
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }
    }

    .glide {
      width: 19px;
      height: 19px;
      position: absolute;
      bottom: 30px;
    }

  }
}

.home-index {
  width: 100%;
  background: url("@/assets/newui/home/icon_shouyebeijing@2x.png");
  background-size: 100%;
  background-repeat: no-repeat;
  padding-top: 60px;
  color: #1a1b1c;
  overflow-y: scroll;
  position: relative;

  // animation: slide-show-bottom-top 1s ease forwards;

  .icon_shanghuagengduo {
    position: absolute;
    top: 40px;
    width: 19px;
    height: 19px;
    left: 50%;
    transform: translateX(-50%);
  }

  .home-index-user {
    height: 60px;
    display: flex;
    position: relative;
    margin: 0 15px;

    .home-index-user-info {
      margin-left: 10px;
      margin-top: 7px;
      width: 0;
      flex: 1;

      .home-index-user-info-name {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        line-height: 16px;
        color: #1A1B1C;
        text-align: left;
        font-style: normal;
        max-width: 200px;
      }

      .home-index-user-info-dandp {
        margin-top: 10px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 14px;


        .topbumen_l {
          height: 22px;
          width: 108px;
          line-height: 22px;
          color: #1881FF;
          position: relative;
          background: url("@/assets/newui/home/icon_bumen@2x.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;

        }

        .topbumen_r {
          font-family: FontName;
          height: 22px;
          width: 92px;
          line-height: 22px;
          color: #FFFFFF;
          position: relative;
          background: url("@/assets/newui/home/icon_mingcheng@2x.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          margin-left: -6px;

        }
      }
    }
  }

  &-notice {
    margin-left: 15px;
    margin-right: 15px;
    width: calc(100 - 30px);
    box-sizing: border-box;
    height: 35px;
    background: linear-gradient(180deg, #DDF0FE 0%, #FFFFFF 100%);
    border-radius: 5px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    padding: 0 15px;

    .notice_icon {
      width: 14px;
      height: 14px;
    }

    .font {
      font-weight: 400;
      font-size: 14px;
      color: #1A1B1C;
      margin-left: 10px;
      width: calc(100% - 30px);
      height: 35px;
    }

    :deep(.van-notice-bar) {
      background: none;
      padding: 0;
    }
  }

  .home-index-data {
    border-radius: 5px;
    margin: 0 10px;
    margin-top: 20px;
    background: #fff;
    padding: 10px 10px 15px 10px;
    position: relative;

    .home-index-data-bg {
      background: url("@/assets/newui/home/icon_jianbaobeijing@2x.png") no-repeat;
      background-size: 100% 100%;
      position: absolute;
      width: 108px;
      height: 53px;
      right: 0;
      top: 0;
    }

    .home-index-data-mainbox {
      position: relative;
    }

    .home-dates-box {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 12px;
      color: #0094FF;
      line-height: 12px;
      text-align: left;
      font-style: normal;
      width: 222px;
      height: 26px;
      background: #EEF0FF;
      border-radius: 5px;
      border: 1px solid #FFFFFF;
      filter: blur(0px);
      justify-content: space-between;
      padding-left: 10px;

      .line {
        width: 20px;
        height: 1px;
        background: #0094FF;
        margin-right: 5px;
      }

      .r_img {
        background: url("@/assets/newui/home/icon_rili@2x.png") no-repeat;
        background-size: 100% 100%;
        width: 24px;
        height: 24px;
      }
    }

    &-title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      &-title {
        display: flex;
        width: 100px;

        &-text {
          margin-left: 5px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 14px;
          line-height: 14px;
          text-align: left;
          font-style: normal;
        }
      }

      &-time {
        width: 140px;
        height: 24px;
        line-height: 24px;
        background: #d4edff;
        border-radius: 12px;
        display: flex;

        &-text {
          margin: 2px 0;
          width: 34px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          font-style: normal;
        }

        &-active {
          background: #0094ff;
          border-radius: 12px;
          color: #ffffff;
        }
      }
    }

    .home-index-data-card {
      margin-top: 10px;

      .home-index-data-card-position {
        width: 105px;
        height: 68px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        padding-left: 3px;

        &-text {
          margin-left: 3px;
          width: 0px;
          flex: 1;

          div:nth-child(1) {
            font-size: 18px;
            font-weight: 700;
            text-align: center;
          }

          div:nth-child(2) {
            text-align: center;
            font-size: 14px;
          }
        }
      }

      .home-index-data-card-first {
        display: flex;
        justify-content: space-between;

        &-first {
          background: #F0F9FF;

          &-text {
            color: #0055ff;
          }
        }

        &-second {
          background: #DEFBF1;

          &-text {
            color: #14ce67;
          }
        }

        &-third {
          background: #FFE7EC;

          &-text {
            color: #fe4b4b;
          }
        }
      }

      &-second {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;

        &-first {
          background: #FFF6EC;

          &-text {
            color: #ff5a1a;
          }
        }

        &-second {
          background: #E7FBFE;

          &-text {
            color: #00beff;
          }
        }

        &-third {
          background: #F6F2FF;

          &-text {
            color: #c12aff;
          }
        }
      }
    }

    &-date {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #0094ff;
      width: calc(100% - 75px);
      justify-content: flex-end;

      &-first {
        display: flex;
        align-items: center;

        &-date {
          margin-right: 5px;
        }
      }

      &-middle {
        margin: 0 10px;
      }

      &-second {
        display: flex;
        align-items: center;

        &-date {
          margin-right: 5px;
        }
      }
    }
  }

  .home-index-todo {
    height: 98px;
    background: url("@/assets/newui/home/icon_daibaner@2x.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 5px;
    padding: 15px 15px 0;
    margin: 20px 10px;
    margin-bottom: 10px;
    position: relative;

    .todo_guajian {
      background: url("@/assets/newui/home/icon_daibangongzuotu@2x.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 74px;
      height: 53px;
      top: -12px;
      right: 26px;
      position: absolute;
    }

    .home-index-todo-title {
      display: flex;
      justify-content: center;
      align-items: center;
      background: url("@/assets/newui/home/icon_daibanyi@2x.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 99px;
      height: 28px;
      position: absolute;
      top: 0px;

      .home-index-todo-title-imgtext {
        background: url("@/assets/newui/home/icon_daibangongzuo@2x.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 59px;
        height: 16px;
      }
    }

    .home-index-todo-list {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;

      &-first {
        text-align: center;
        position: relative;
        width: 0px;
        flex: 1;

        div:nth-child(2) {
          margin-top: 3px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #1a1b1c;
          line-height: 12px;
        }

        &-badge {
          height: 17px;
          min-width: 17px;
          border-radius: 8px 8px 8px 0;
          background-color: #fc2540;
          position: absolute;
          right: 0px;
          top: -7px;

          div {
            color: #ffffff;
            font-size: 11px;
            text-align: center;
            padding: 2px;
            line-height: 14px;
          }
        }
      }
    }
  }

  .home-index-shortcuts {
    margin: 0 10px;
    margin-top: 10px;
    background-color: #FAFEFF;
    border-radius: 5px;
    margin-bottom: 60px;

    .home-index-shortcuts-title {
      display: flex;
      align-items: center;
      background: url("@/assets/newui/home/icon_kuaijierukoubeijing@2x.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      height: 40px;
      padding-left: 10px;

      div:nth-child(2) {
        margin-left: 5px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 14px;
        color: #1a1b1c;
        line-height: 14px;
      }
    }

    &-card {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      border-radius: 5px;

      &-left {
        width: 160px;
        height: 210px;
        padding: 15px;
        position: relative;
        background: linear-gradient(180deg, #E1EEFF 0%, #FFFFFF 50%, #FFFFFF 100%);
        border-radius: 5px;

        &-image {
          position: absolute;
          right: 15px;
          bottom: 0px;
          width: 95px;
          height: 88px;
        }

        &-text {

          height: 16px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 16px;
          color: #1A1B1C;
          line-height: 16px;
          text-align: left;
          font-style: normal;
          width: fit-content;
          position: relative;

          &::after {
            content: "";
            position: absolute;
            width: 6px;
            height: 10px;
            background: url("@/assets/newui/home/icon_youjiantou@2x.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            right: -10px;
            top: 50%;
            transform: translateY(-50%);
          }
        }

        &-tips {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #464E5D;
          line-height: 16px;
          text-align: justify;
          font-style: normal;
          margin-top: 10px;
        }
      }

      &-right {

        &-top {
          width: 162px;
          height: 100px;
          padding: 15px;
          box-sizing: border-box;
          position: relative;
          background: linear-gradient(180deg, #FEF1E1 0%, #FFFFFF 40%, #FFFFFF 100%);
          border-radius: 5px;

          &-image {
            position: absolute;
            right: 10px;
            bottom: 0px;
            width: 67px;
            height: 59px;
          }

          &-text {
            height: 16px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 16px;
            color: #1A1B1C;
            line-height: 16px;
            text-align: left;
            font-style: normal;
            width: fit-content;
            position: relative;

            &::after {
              content: "";
              position: absolute;
              width: 6px;
              height: 10px;
              background: url("@/assets/newui/home/icon_youjiantou@2x.png");
              background-size: 100% 100%;
              background-repeat: no-repeat;
              right: -10px;
              top: 50%;
              transform: translateY(-50%);
            }
          }

          &-tips {
            position: absolute;
            top: 35px;
            width: 40%;
            left: 15px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #464E5D;
            line-height: 16px;
            text-align: justify;
            text-align-last: justify;
            font-style: normal;
            margin-top: 10px;
          }
        }

        &-bottom {
          width: 162px;
          height: 100px;
          padding: 15px;
          box-sizing: border-box;
          position: relative;
          background: linear-gradient(180deg, #FFE7EC 0%, #FFFFFF 40%, #FFFFFF 100%);
          border-radius: 5px;
          margin-top: 10px;

          &-image {
            position: absolute;
            right: 10px;
            bottom: 0px;
            width: 67px;
            height: 59px;
          }

          &-text {
            height: 16px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 16px;
            color: #1A1B1C;
            line-height: 16px;
            text-align: left;
            font-style: normal;
            width: fit-content;
            position: relative;

            &::after {
              content: "";
              position: absolute;
              width: 6px;
              height: 10px;
              background: url("@/assets/newui/home/icon_youjiantou@2x.png");
              background-size: 100% 100%;
              background-repeat: no-repeat;
              right: -10px;
              top: 50%;
              transform: translateY(-50%);
            }
          }

          &-tips {
            position: absolute;
            top: 35px;
            width: 40%;
            left: 15px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #464E5D;
            line-height: 16px;
            text-align: justify;
            text-align-last: justify;
            font-style: normal;
            margin-top: 10px;
          }
        }
      }
    }
  }

  .supplier_detail_content_divorder {
    border-bottom: 1px solid #fafaff;
  }

  .supplier_detail_content_div_first {
    margin-top: 63vh;
  }

  .supplier_detail_content_div {
    font-size: 13px;
    height: 35px;
    // height: 25%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    :deep(.van-icon) {
      margin-left: 0% !important;
    }

    .label {
      min-width: 55px;
    }

    .van-image {
      width: 32px;
      height: 32px;
    }

    .value {
      color: #b8beca;
      max-width: calc(100% - 85px);
      display: flex;
      justify-content: right;
      word-break: break-all;
    }
  }

  .home-index-user-image {
    width: 60px;
    height: 60px;
    border: 2px solid #fff;
    flex-shrink: 0;
  }

  .menu_cion {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 0px;
  }

  .erweima_news {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 69px;
  }

  .menu_news {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 20px;
  }

  .erweima_cion {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 0px;
  }

  .guanbi_cion {
    width: 14px;
    height: 14px;
    position: absolute;
    top: 15px;
    right: 15px;
  }

  .QRcode {
    width: 315px;
    height: 370px;
    background-color: white;
    border-radius: 5px;

    .code_title {
      text-align: center;
      font-size: 16px;
      font-weight: 500;
      padding-top: 28px;
      line-height: 22px;
      color: #1A1B1C;
    }

    .code {
      width: 201px;
      height: 201px;
      margin: 15px 57px;
      box-sizing: border-box;
      padding: 20px;
      background: #F6FAFF;
      border-radius: 10px;

      .code_content {
        width: 100%;
        height: 100%;
      }
    }

    .QR_BT_box {
      width: 201px;
      box-sizing: border-box;
      margin: 0 auto;
      margin-top: 20px;
      padding: 0 30px;
      display: flex;
      justify-content: space-between;

      .weixin_cion {
        width: 40px;
        height: 40px;
      }
    }

  }

  .savePicture {
    text-align: center;
    padding: 20px;
  }

  .right_popup {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 50px 15px;
    color: #1C1D1E;
    display: flex;
    flex-flow: column;
    justify-content: space-between;

    .right_popup_box {
      width: 100%;

      .right_popup_box_item {
        width: 100%;
        padding: 10px 0;
        border-bottom: 1px solid #efefef;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .right_popup_box_item_left {
          display: flex;
          align-items: center;

          img {
            width: 14px;
            height: 14px;
            margin-right: 20px;
          }
        }
      }
    }

    .login-index-policy-text-rules {
      color: #009EFF;
      font-size: 13px;
      width: 100%;
      margin-top: 65vh;
    }

    .login-index-policy-text-rule {
      color: #009EFF;
      font-size: 13px;
      width: 100%;
    }

    .quit_button {
      width: 100%;
      height: 44px;
      background: #FDE7E7;
      border-radius: 5px;
      text-align: center;
      color: #FC2540;
      line-height: 44px;

      .quit_cion {
        width: 14px;
        height: 14px;
      }
    }
  }

  .home-index-data-title-title-textimg {
    background: url("@/assets/newui/home/icon_shujujianbao@2x.png") no-repeat;
    background-size: 100% 100%;
    width: 59px;
    height: 16px;
    margin-left: 4px
  }

  .home-index-todo-title-image {
    width: 20px;
    height: 20px;
  }

  .home-index-todo-title-textimage {
    width: 59px;
    height: 16px;
  }

  .home-index-data-card-first-first-image {
    width: 36px;
    height: 36px;
  }

  .home-index-todo-list-first-image {
    width: 33px;
    height: 33px;
  }
}
</style>
